<template>
    <Header />
    <div>
        <div class="topBox pd30 colorFFF flex-between">
            <div class="flex">
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                <div class="ml10">
                    <div>用户001</div>
                    <div>exemption@gmail.com</div>
                </div>
            </div>
            <div class="cursor" @click="toPage('/userCenter')">
                设置
            </div>
        </div>
        <div class="toolBox pd20">
            <div class="toolItem pd10 mb10 flex-between" v-for="(item,index) in menuList" :key="index" @click="toPage(item.path)">
                <div>
                    {{ item.title }}
                </div>
                <div class="flex">
                    <div class="flex-aliign-center">
                        <span class="color92" style="margin-right: 20px;">{{ item.num }}</span><el-icon><ArrowRight /></el-icon>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import Header from '@/components/Header.vue'
import { ref } from 'vue'
import router from '@/router'
const menuList = ref(
    // 常用联系人 收藏 历史 订单 优惠券 钱包 积分
    [
        {
            title: '常用联系人',
            num: 12,
            path: '/commonContactsPerson'
        },
        {
            title: '收藏',
            num: 2,
            path: '/myFavorites'
        },
        {
            title: '历史',
            num: 3,
            path: '/myHistory'
        },
        {
            title: '优惠券',
            num: 8,
            path: '/myCoupon'
        },
        {
            title: '钱包',
            num: '0元',
            path: '/myWallet'

        },
        {
            title: '积分',
            num: '1999积分',
            path: '/myIntegral'
        }
        
    ]
)

const toPage = (path)=>{
    router.push(path)
}

</script>
<style lang="scss" scoped>
    .topBox{
        background-color: #356CEB;
    }
    .toolBox{
        height: 100vh;
        background-color: #F7F8FA;

        .toolItem{
            background-color: #fff;
            border-radius: 10px;
            min-height: 50px;
        }
    }
</style>